import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Save, Globe, Shield, Bell, Palette, Database, Server } from "lucide-react";

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">系统设置</h1>
          <p className="text-muted-foreground">管理系统配置和偏好设置</p>
        </div>
        <Button>
          <Save className="mr-2 h-4 w-4" />
          保存设置
        </Button>
      </div>

      {/* 设置标签页 */}
      <Tabs defaultValue="general" className="space-y-6">
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="general">基本设置</TabsTrigger>
          <TabsTrigger value="security">安全设置</TabsTrigger>
          <TabsTrigger value="notifications">通知设置</TabsTrigger>
          <TabsTrigger value="appearance">外观设置</TabsTrigger>
          <TabsTrigger value="integrations">集成设置</TabsTrigger>
          <TabsTrigger value="advanced">高级设置</TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Globe className="h-5 w-5" />
                  网站信息
                </CardTitle>
                <CardDescription>配置网站的基本信息</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="siteName">网站名称</Label>
                  <Input id="siteName" defaultValue="后台管理系统" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="siteDescription">网站描述</Label>
                  <Textarea 
                    id="siteDescription" 
                    defaultValue="基于 Next.js 和 Shadcn/UI 的现代化后台管理系统"
                    rows={3}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="siteUrl">网站地址</Label>
                  <Input id="siteUrl" defaultValue="https://example.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="adminEmail">管理员邮箱</Label>
                  <Input id="adminEmail" defaultValue="admin@example.com" />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Database className="h-5 w-5" />
                  系统配置
                </CardTitle>
                <CardDescription>系统运行相关配置</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="timezone">时区设置</Label>
                  <Select defaultValue="asia-shanghai">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="asia-shanghai">Asia/Shanghai (UTC+8)</SelectItem>
                      <SelectItem value="utc">UTC (UTC+0)</SelectItem>
                      <SelectItem value="america-new-york">America/New_York (UTC-5)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="language">默认语言</Label>
                  <Select defaultValue="zh-cn">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="zh-cn">简体中文</SelectItem>
                      <SelectItem value="en-us">English</SelectItem>
                      <SelectItem value="ja-jp">日本語</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="dateFormat">日期格式</Label>
                  <Select defaultValue="yyyy-mm-dd">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="yyyy-mm-dd">YYYY-MM-DD</SelectItem>
                      <SelectItem value="mm-dd-yyyy">MM-DD-YYYY</SelectItem>
                      <SelectItem value="dd-mm-yyyy">DD-MM-YYYY</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>维护模式</Label>
                    <p className="text-sm text-muted-foreground">启用后网站将显示维护页面</p>
                  </div>
                  <Switch />
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="security" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="h-5 w-5" />
                  安全配置
                </CardTitle>
                <CardDescription>系统安全相关设置</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>双因素认证</Label>
                    <p className="text-sm text-muted-foreground">要求用户启用2FA</p>
                  </div>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>密码策略</Label>
                    <p className="text-sm text-muted-foreground">强制使用强密码</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>登录尝试限制</Label>
                    <p className="text-sm text-muted-foreground">限制失败登录次数</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="sessionTimeout">会话超时时间（分钟）</Label>
                  <Input id="sessionTimeout" type="number" defaultValue="30" />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>访问控制</CardTitle>
                <CardDescription>用户权限和访问控制</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>用户角色</Label>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between p-2 border rounded">
                      <span>管理员</span>
                      <Badge>超级管理员</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded">
                      <span>编辑</span>
                      <Badge variant="secondary">内容管理</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded">
                      <span>用户</span>
                      <Badge variant="outline">基础权限</Badge>
                    </div>
                  </div>
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>IP白名单</Label>
                    <p className="text-sm text-muted-foreground">限制特定IP访问</p>
                  </div>
                  <Switch />
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="notifications" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5" />
                通知设置
              </CardTitle>
              <CardDescription>配置系统通知和提醒</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h4 className="font-medium">邮件通知</h4>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>新用户注册</Label>
                      <p className="text-sm text-muted-foreground">有新用户注册时发送邮件</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>订单通知</Label>
                      <p className="text-sm text-muted-foreground">有新订单时发送邮件</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>系统警告</Label>
                      <p className="text-sm text-muted-foreground">系统出现问题时发送邮件</p>
                    </div>
                    <Switch />
                  </div>
                </div>
              </div>
              <Separator />
              <div className="space-y-4">
                <h4 className="font-medium">站内通知</h4>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>实时通知</Label>
                      <p className="text-sm text-muted-foreground">在页面右上角显示通知</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>声音提醒</Label>
                      <p className="text-sm text-muted-foreground">播放通知声音</p>
                    </div>
                    <Switch />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="appearance" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Palette className="h-5 w-5" />
                  主题设置
                </CardTitle>
                <CardDescription>自定义界面外观</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>主题模式</Label>
                  <Select defaultValue="light">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="light">浅色模式</SelectItem>
                      <SelectItem value="dark">深色模式</SelectItem>
                      <SelectItem value="auto">跟随系统</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>主色调</Label>
                  <Select defaultValue="blue">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="blue">蓝色</SelectItem>
                      <SelectItem value="green">绿色</SelectItem>
                      <SelectItem value="purple">紫色</SelectItem>
                      <SelectItem value="red">红色</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>紧凑模式</Label>
                    <p className="text-sm text-muted-foreground">减少界面间距</p>
                  </div>
                  <Switch />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>侧边栏设置</CardTitle>
                <CardDescription>自定义侧边栏显示</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>固定侧边栏</Label>
                    <p className="text-sm text-muted-foreground">侧边栏始终可见</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>显示图标</Label>
                    <p className="text-sm text-muted-foreground">在菜单项旁显示图标</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>显示用户信息</Label>
                    <p className="text-sm text-muted-foreground">在侧边栏底部显示用户信息</p>
                  </div>
                  <Switch defaultChecked />
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="integrations" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>第三方集成</CardTitle>
              <CardDescription>配置外部服务集成</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h4 className="font-medium">支付集成</h4>
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 border rounded">
                    <div className="flex items-center space-x-3">
                      <div className="h-8 w-8 bg-green-100 rounded flex items-center justify-center">
                        <span className="text-green-600 font-bold">支</span>
                      </div>
                      <div>
                        <div className="font-medium">支付宝</div>
                        <div className="text-sm text-muted-foreground">已连接</div>
                      </div>
                    </div>
                    <Badge className="bg-green-100 text-green-800">已启用</Badge>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded">
                    <div className="flex items-center space-x-3">
                      <div className="h-8 w-8 bg-green-100 rounded flex items-center justify-center">
                        <span className="text-green-600 font-bold">微</span>
                      </div>
                      <div>
                        <div className="font-medium">微信支付</div>
                        <div className="text-sm text-muted-foreground">已连接</div>
                      </div>
                    </div>
                    <Badge className="bg-green-100 text-green-800">已启用</Badge>
                  </div>
                </div>
              </div>
              <Separator />
              <div className="space-y-4">
                <h4 className="font-medium">存储服务</h4>
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 border rounded">
                    <div className="flex items-center space-x-3">
                      <div className="h-8 w-8 bg-blue-100 rounded flex items-center justify-center">
                        <span className="text-blue-600 font-bold">S3</span>
                      </div>
                      <div>
                        <div className="font-medium">AWS S3</div>
                        <div className="text-sm text-muted-foreground">未连接</div>
                      </div>
                    </div>
                    <Button variant="outline" size="sm">连接</Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="advanced" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Server className="h-5 w-5" />
                  系统维护
                </CardTitle>
                <CardDescription>系统维护和优化</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>缓存清理</Label>
                  <Button variant="outline" className="w-full">清理系统缓存</Button>
                </div>
                <div className="space-y-2">
                  <Label>数据库优化</Label>
                  <Button variant="outline" className="w-full">优化数据库</Button>
                </div>
                <div className="space-y-2">
                  <Label>日志清理</Label>
                  <Button variant="outline" className="w-full">清理系统日志</Button>
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>自动备份</Label>
                    <p className="text-sm text-muted-foreground">启用自动数据备份</p>
                  </div>
                  <Switch defaultChecked />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>开发设置</CardTitle>
                <CardDescription>开发者相关配置</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>调试模式</Label>
                    <p className="text-sm text-muted-foreground">显示详细错误信息</p>
                  </div>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>API文档</Label>
                    <p className="text-sm text-muted-foreground">启用API文档访问</p>
                  </div>
                  <Switch />
                </div>
                <div className="space-y-2">
                  <Label>日志级别</Label>
                  <Select defaultValue="info">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="debug">Debug</SelectItem>
                      <SelectItem value="info">Info</SelectItem>
                      <SelectItem value="warn">Warning</SelectItem>
                      <SelectItem value="error">Error</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
} 